<template>
  <view>
    <!-- 未登录区域 -->
    <view v-if="!isLogin" class="">

      <uni-section title="用户登录" type="line">

        <uni-card :cover="cover">

          <view>
            <uni-forms>
              <uni-forms-item label="登录名称">
                <uni-easyinput v-model="loginInfo.username"></uni-easyinput>
              </uni-forms-item>
              <uni-forms-item label="密码">
                <uni-easyinput type="password" v-model="loginInfo.password"></uni-easyinput>
              </uni-forms-item>
            </uni-forms>

          </view>

          <view slot="actions">
            <button @click="login" type="primary" size="mini">登录</button>
            <button type="warn" size="mini">重置</button>
          </view>

        </uni-card>

      </uni-section>

    </view>

    <!-- 已经登录区域 -->
    <view v-if="isLogin" class="">

      <view class="line"></view>

      <view class="userinfo">

        <view class="image-box">
          <image :src="user.logo"></image>
        </view>

        <view class="">
          {{ user.tbUser.username }}
          {{ user.tbUserInfo.nickname }}
        </view>

      </view>

      <view class="line"></view>

      <view>
        <button @click="toPage('/pages/notice/notice')" type="primary">公告信息</button>
      </view>

      <view class="line"></view>

      <view>
        <button @click="logout" type="warn">安全退出</button>
      </view>

    </view>

  </view>
</template>

<script setup>
  import {
    ref
  } from 'vue'
  import {
    api,
    tools
  } from '../../api/api.js'

  import userstore from '../../store/user.js';
  const {
    update
  } = userstore();

  import {
    storeToRefs
  } from 'pinia'

  const {
    isLogin,
    user
  } = storeToRefs(userstore())

  const loginInfo = ref({
    "username": "",
    "password": ""
  })

  const login = () => {
    api.post('/auth', loginInfo.value, (data) => {
      const icon = data.success ? 'success' : 'fail'
      uni.showToast({
        title: data.message,
        icon: icon
      })
      update()
    })
  }

  const logout = () => {
    api.delete('/auth', {}, () => {
      update()
    })
  }

  const toPage = (page) => {
    uni.navigateTo({
      url: page
    })
  }
</script>

<style>
  .line {
    border: 1px solid #dcdcdc;
    margin: 0.5rem;
  }

  .userinfo {
    display: flex;
    align-items: center;
  }

  .userinfo image {
    width: 3rem;
    height: 3rem;
  }

  .image-box {
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    overflow: hidden;
  }
</style>